<script setup>
import { useCityStore,CriteriaStore,useUserStore,useQueryStore } from '@/stores'
import { ref, onMounted, unref  } from 'vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import { MessagePlugin } from 'tdesign-vue-next';
import { SearchIcon,ChatMessageIcon } from 'tdesign-icons-vue-next';
import { ClickOutside as vClickOutside } from 'element-plus'
import {ArrowDown,ChatDotRound} from '@element-plus/icons-vue'
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
//----------------------------------------------
const fullscreenLoading = ref(false)

const userStore = useUserStore()
const queryStore = useQueryStore()
const formData = ref({
    company: null,
    city: queryStore.query.city,
    industry: null,
    financing: null,
    scale: null,
})
const industryList = ref(null);
const criteria = CriteriaStore()
const citylist = ref(null)
const dialogCityVisible = ref(false)
const useCity = useCityStore()
const choose_city = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.get('http://localhost:8000/user/getCity',{
        headers: {
            authentication: userStore.token,
        }
    })
    .then(resp => {
    if(resp.data.code === 1){
      citylist.value = resp.data.data
      dialogCityVisible.value = true
      }
    }).catch(error => {
        MessagePlugin.error("请求失败！")
    })
}
const getIndustry = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.get('http://localhost:8000/user/getindustry',{
        headers:{
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            industryList.value = resp.data.data;
        }
    })
}
const dialogCityVisible1 = ref(false)
const openindustry = () => {
    dialogCityVisible1.value = true
    getIndustry()
}
const companyList = ref(null)
onMounted(() => {
    getCompany()
})
//-------------------------------------
const getCompany = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    fullscreenLoading.value = true
    axios.post('http://localhost:8000/user/getcompany',{
        company: formData.value.company,
        city: formData.value.city,
        industry: formData.value.industry,
        financing: formData.value.financing,
        scale: formData.value.scale,
    },{
        headers:{
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            console.log(resp.data.data)
            companyList.value = resp.data.data
            fullscreenLoading.value = false
        }
    })
}
const setCity = (citys) => {
    if(citys === '全国'){
        formData.value.city = null;
    }else{
        formData.value.city = citys;
    }
    getCompany()
}
const setIndustry = (newIndustry) => {
    formData.value.industry = newIndustry;
    getCompany()
}
const setFinancing = (financing) => {
    if(financing === '不限'){
        formData.value.financing = null;
    }else{
        formData.value.financing = financing;
    }
    getCompany()
}
const setScale = (scales) => {
    if(scales === '不限'){
        formData.value.scale = null;
    }else{
        formData.value.scale = scales;
    }
    getCompany()
}
</script>

<template>
    <div style=" background: linear-gradient(to bottom, rgb(189, 222, 241) 30%, white 100%); ">
        <t-card bordered style="width:1220px;
        margin-left: 240px;
        border-radius: 15px;
        ">
        <span style="margin-right: 30px;font-size: 20px;">城市</span>
            <div style="width: 800px;
            background-color: rgb(50, 176, 249);
            border-radius: 12px;
            padding: 2px;
            margin-top: 18px;
            display: inline-block;
            ">
                
                <input class="input" v-model="formData.company" placeholder="搜索公司" clearable type="text">
                <el-button style="background-color: rgb(50, 176, 249);
                border: 1px solid rgb(50, 176, 249);
                color: white;
                font-weight: 500;
                font-size: 24px;
                margin-left: 10px;"
                @click="getCompany()">
                    <SearchIcon  style="transform: scale(1.2);margin-right: 15px;"/>搜索
                </el-button>
            </div>
            <div style="margin-top: 20px;">
                <div class="area" style="color: rgb(39, 148, 211);
                font-size: 18px;
                font-weight: 600;
                ">城市和区域</div>
                <div style="margin-top: 20px;">
                    <div v-loading.fullscreen.lock="fullscreenLoading" v-for="(x, index) in useCity.city" :key="index"
                    @click="setCity(x)" class="hot_city">{{ x }}</div>
                    <div class="hot_city" plain @click="choose_city">其他城市</div>
                    <el-dialog v-model="dialogCityVisible" title="请选择城市："
                    width="650"
                    style="height: 400px;
                    overflow-y: auto;">
                        <div style="width: 610px;" v-for="(x, index) in citylist" :key="index">
                            <div class="form" style="width: 100px;">{{x.flag}}</div>
                            <div class="form" style="width: 500px;margin-bottom: 20px;" >
                                <div 
                                v-loading.fullscreen.lock="fullscreenLoading"
                                class="cityclick"
                                @click="setCity(x)" v-for="(y, index) in x.cityList">{{y}}</div>
                            </div>
                        </div>
                    </el-dialog>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div style="width: 100px;
                font-size: 16px;
                font-weight: 600;
                float: left;">行业类型：</div>
                <div class="manager-1"> 
                    <div v-for="(x, index) in criteria.industry" :key="index"
                     @click="setIndustry(x.name)" class="hot_city">{{ x.name }}</div>
                    <div class="hot_city" plain @click="openindustry">其他行业</div>
                    <el-dialog v-model="dialogCityVisible1" title="请选择行业："
                    width="650"
                    style="height: 400px;
                    overflow-y: auto;">
                        <div style="width: 610px;" >
                        
                            <div class="form" style="width: 580px;margin-bottom: 20px;margin-left: 10px;" >
                                <div 
                                
                                class="cityclick"
                                @click="setIndustry(x.name)" v-for="(x, index) in industryList" :key="index">{{x.name}}</div>
                            </div>
                        </div>
                    </el-dialog>
                </div>
            </div>
            <div style="margin-top: 20px;" >
                <div class="manager" >融资阶段：</div>
                <div class="manager-1">
                    <div @click="setFinancing(x.name)" v-for="(x, index) in criteria.financing" :key="index"
                     class="hot_city">{{ x.name }}</div>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div class="manager">公司规模：</div>
                <div class="manager-1">
                    <div @click="setScale(x.name)" v-for="(x, index) in criteria.scale    " :key="index"
                     class="hot_city">{{ x.name }}</div>
                </div>
            </div>
        </t-card>
        <div style="width:1320px;
        margin-left: 230px;">
            <t-card class="hj" style="width: 290px;
            height: 135px;"
            v-for="(x, index) in companyList" :key="index">
                <div style="height: 80px;">
                    <img :src="x.clogo" style="width: 60px; height: 60px;float: left;"></img>
                    <div style="display: inline-block;">
                        <div style="font-size: 16px;margin-left: 10px; margin-bottom: 16px;">{{x.name}}</div>
                        <div style="width: 175px;display: flex; align-items: flex-start;" >
                            <div class="label text-1" style="flex-shrink: 0;" >{{x.cfinancing}}</div>
                            <div class="label text-1" >{{x.cindustry}}</div>
                        </div>
                    </div>
                </div>
                <div >
                    <div v-if="x.hotJob"style="float: left;">热招职位:</div>
                    <div style="float: left;width: 97px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;">{{x.hotJob}}</div>
                    <div style="display: inline-block; width: 78px;
                    color: red;font-size: 13px;">{{x.jobSalary}}</div>
                    </div>
            </t-card>
        </div>
    </div>
</template>

<style scoped>
.input {  
    width: 625px;  
    height: 27px;
    padding: 10px;  
    font-size: 16px;  
    border: 1px solid rgb(50, 176, 249);
    border-radius: 10px; 
    transition: all 0.3s ease; 
}
.input:focus {  
    outline: none;
  } 
.area{
    color: rgb(39, 148, 211);
    font-size: 18px;
    font-weight: 500;
    position: relative;  
    display: inline-block; 
}
.area::after{
    content: '';  
    position: absolute;  
    width: 100%;  
    height: 1px;  
    bottom: -0.5em; 
    left: 0;  
    border-bottom: 4px solid rgb(39, 148, 211); 
}
.hot_city{
    display: inline-block;
    margin-left: 10px;
    margin-right: 15px;
    cursor: pointer;
    
}
.hot_city:hover{
    color: rgb(50, 176, 249);
}
.form{
    float: left;
}
.cityclick{
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;
}
.cityclick:hover{
    color: rgb(50, 176, 249);
}
.cityclick:active{
    color: rgb(4, 129, 202);
}
.manager{
    display: inline-block;
    width: 100px;
    font-size: 16px;
    font-weight: 600;

}
.manager-1{
    display: inline-block;
    /* float: left; */
    width: 1000px;
}
.label{
    float: left;
    border-radius: 4px;
    background-color: #ececec;
    padding: 0px 5px;
    margin-right: 6px;
    font-size: 14px;
    margin-left: 5px;
}
.text-1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 10px;
}
.hj{
    display: inline-block;
    margin: 0px 10px;
    border-radius: 10px;
    margin-top: 25px;
    padding: 0px !important;
    background: linear-gradient(to bottom, white 65%, rgb(237, 246, 251) 35%);
    /* background: linear-gradient(to bottom, white 0%, white 10%, antiquewhite 10%, antiquewhite 100%); 背景渐变  */
    
}
.t-card_body{
    padding: 0px !important; 
}
</style>